<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>计算属性</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        
    </style>
</head>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    姓：<input type="text" v-model="firstName">
    <br><br>
    名：<input type="text" v-model="lastName">
    <br><br>
    插值:<span>{{firstName}}-{{lastName}}</span>
    <br><br>
    methods:<span>{{fullName()}}</span>
    <br><br>
    计算属性:<span>{{cFullName}}</span>
    <br><br>
    计算属性:<span>{{sFullName}}</span>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '培立优',
            firstName: '张',
            lastName: '三'
        },
        computed:{
            cFullName:{
                // 1. 初次读取调用，2. 依赖数据发生改变调用。 其余时间读缓存
                get(){
                    return this.firstName + '-' + this.lastName;
                }
            },
            sFullName(){
                // 上面的简写
                return this.firstName + '-' + this.lastName;
            }
        },
        methods: {
            fullName(){
                let that = this;
                return that.firstName + '-' + that.lastName;
            }
        }
    });
</script>

</html>